/*
  1、naive-ui库中的二维码标签<NQrCode/>，在2.36.0版本，开始提供该组件
  2、login页面向myqrcode页面跳转传参时，"vue-router": "^4.1.4"版本开始增加了删除未使用的参数这个功能
      router.push({ name: 'myqrcode', query: { barCodeUrl : barCodeUrlValue } })
      console.log('传递的数据: ', route.query.barCodeUrl)
 */

import { defineComponent, ref } from 'vue'
import styles from './index.module.scss'
import {
  NButton,
  NQrCode,
  NSpace
} from 'naive-ui'

import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { useUserStore } from '@/store/user/user'
import { updateMyselfAuth } from '@/service/modules/users'


const myqrcode = defineComponent({
  name: 'verifycode',
  setup() {
    const userStore = useUserStore()
    const barCodeUrlValue = ref('')
    const showQrCode = ref(false)

    const updateCode = async () => {
      barCodeUrlValue.value = await updateMyselfAuth({ Sessionid: userStore.getSessionId })
      showQrCode.value = true
    }

    const router: Router = useRouter()
    const handleBack = () => {
      router.back()
    }

    return {
      handleBack,
      barCodeUrlValue,
      updateCode,
      showQrCode
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div className={styles['slogan']}>点击“生成二维码”，此账号将生成新的验证码，此账号所有使用者都需扫码重新绑定！</div>
        <div v-show={this.showQrCode} class={styles['code-model']}>
          <NSpace>
            <NQrCode id='qr-code' value={this.barCodeUrlValue} size={160}></NQrCode>
          </NSpace>
        </div>
        <div class={styles['change-model']}>
          <NButton
            class='btn-qrcode'
            round
            type='info'
            style={{ color: 'black' }}
            onClick={ this.updateCode }
          >
            生成二维码
          </NButton>
        </div>
        <div className={styles['back-model']}>
          <NButton
            class='btn-qrcode'
            round
            type='info'
            style={{ color: 'black' }}
            onClick={ this.handleBack }
          >
            返回
          </NButton>
        </div>
      </div>
    )
  }
})

export default myqrcode
